<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
  <title>Test Case for HTML Mutation</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <style type="text/css">
    td > div {
      background-color: red;
      min-height: 1em;
    }
    div > div {
      background-color: green;
      min-height: 1em;
    }
  </style>
</head>
<body>

<h1>HTML Mutation</h1>

<p>This test-case is intended for HTML panel (testing mutation support).
<br/>
</p>

<ol>
<li>Open Firebug and select the HTML panel.</li>
<li>Set <i>Highlight Changes</i> and <i>Scroll Changes in to View</i> options (in the mini tab menu)</li>
<li>Click the <code>Execute</code> buttons step by step.</li>
<li>You should see proper highlights in the HTML panel.</li>
</ol>

<table>
<tr>
    <td>Mutate Text: <button id="mutateTextButton" onclick="onMutateText('mutateText');">Execute</button></td>
    <td><div id="mutateText">&nbsp;<div></div></div></td>
</tr>
<tr>
    <td>Mutate Text Inline: <button id="mutateTextInlineButton" onclick="onMutateText('mutateTextInline');">Execute</button></td>
    <td><div id="mutateTextInline">Test</div></td>
</tr>
<tr>
    <td>Mutate Node: <button id="mutateNodeButton" onclick="onMutateNode('mutateNode')">Execute</button></td>
    <td><div id="mutateNode">&nbsp;<div></div></div></td>
</tr>
<tr>
    <td>Mutate Node Text: <button id="mutateNodeTextButton" onclick="onMutateNode('mutateNodeText')">Execute</button></td>
    <td><div id="mutateNodeText">Test</div></td>
</tr>
<tr>
    <td>Mutate Node Empty: <button id="mutateNodeEmptyButton" onclick="onMutateNode('mutateNodeEmpty')">Execute</button></td>
    <td><div id="mutateNodeEmpty"></div></td>
</tr>
<tr>
    <td>Remove Node: <button id="removeNodeButton" onclick="onRemoveNode('removeNode', 1)">Execute</button></td>
    <td><div id="removeNode">&nbsp;<div></div></div></td>
</tr>
<tr>
    <td>Remove Node Text: <button id="removeNodeTextButton" onclick="onRemoveNode('removeNodeText', 0)">Execute</button></td>
    <td><div id="removeNodeText">Test<div></div></div></td>
</tr>
<tr>
    <td>Remove Node Empty: <button id="removeNodeEmptyButton" onclick="onRemoveNode('removeNodeEmpty', 0)">Execute</button></td>
    <td><div id="removeNodeEmpty">Test</div></td>
</tr>
<tr>
    <td>Mutate Attr New: <button id="mutateAttrNewButton" onclick="onMutateAttr('mutateAttrNew', 'title', 'boo')">Execute</button></td>
    <td><div id="mutateAttrNew"><div class="new"></div></div></td>
</tr>
<tr>
    <td>Mutate Attr Set: <button id="mutateAttrSetButton" onclick="onMutateAttr('mutateAttrSet', 'title', (new Date().getTime()))">Execute</button></td>
    <td><div id="mutateAttrSet"><div class="set" title="test"></div></div></td>
</tr>
<tr>
    <td>Mutate Attr Remove: <button id="mutateAttrRemoveButton" onclick="onMutateAttr('mutateAttrRemove', 'title', undefined)">Execute</button></td>
    <td><div id="mutateAttrRemove"><div title="test"></div></div></td>
</tr>
<tr>
    <td>Mutate Test Race Condition: <button id="mutateRemovedRaceButton" onclick="onMutateRemovedRace('mutateRemovedRace')">Execute</button></td>
    <td><div id="mutateRemovedRace">&nbsp;<div></div></div></td>
</tr>
</table>

<script type="text/javascript">
function onMutateText(id)
{
    var mutateId = document.getElementById(id);
    mutateId.firstChild.appendData("test");
}

function onMutateAttr(id, attr, value)
{
    var mutateId = document.getElementById(id);
    if (value)
        mutateId.firstChild.setAttribute(attr, value);
    else
        mutateId.firstChild.removeAttribute(attr);
}

function onMutateNode(id)
{
    var mutateId = document.getElementById(id);
    var button = document.createElement("button");
    mutateId.appendChild(button);
}

function onRemoveNode(id, index)
{
    var mutateId = document.getElementById(id);
    mutateId.removeChild(mutateId.childNodes[index]);
}

function onMutateRemovedRace(id)
{
    var mutateId = document.getElementById(id);
    var button = document.createElement("button");

    mutateId.appendChild(button);
    mutateId.lastChild.setAttribute("title", "test");
    mutateId.firstChild.appendData("test");
    mutateId.innerHTML = "&nbsp;";
}
</script>

</body>
</html>
